<template>
  <div class="layout-demo">
    <a-layout class="layout">
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
.layout-demo {
  .layout {
    height: 100vh;
  }

  :deep(.arco-layout-header),
  :deep(.arco-layout-footer),
  :deep(.arco-layout-sider-children),
  :deep(.arco-layout-content) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    font-stretch: condensed;
    color: var(--color-white);
    text-align: center;
  }

  :deep(.arco-layout-header),
  :deep(.arco-layout-footer) {
    height: 64px;
    background-color: var(--color-primary-light-4);
  }

  :deep(.arco-layout-content) {
    background-color: var(--color-fill-2)
  }
}
</style>
